<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar title="问医生" left-arrow @click="$router.push('/home')" />
        <van-search shape="round" placeholder="搜索医生、医院或病症" @change="getList" v-model="searchValue" />
        <br />
      </div>

      <div class="kind">
        <h3>热门科室</h3>
        <ul>
          <li v-for="item in list" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

        <van-dropdown-menu swipe-threshold="3">
          <van-dropdown-item v-model="searchValue" :options="option1" title="全部科室" @click="city">
            <div class="one">
              <div class="two">
                <ul v-for="(item, ind) in citles" :key="item.id" @click="handleClick(ind)">
                  <li :class="activeIndex === ind ? 'active' : ''">{{ item.province }}</li>
                </ul>
              </div>

              <div class="three">
                <ul v-for="(item, ind) in citles" :key="item.id">
                  <div v-if="ind === activeIndex">
                    <div v-for="(items, ind) in item.cities" :key="ind" @click="handleClicks(ind)">
                      <li :class="activeIndexss === ind ? 'activess' : ''">{{ items }}</li>
                    </div>
                  </div>
                </ul>
              </div>
            </div>
          </van-dropdown-item>

          <van-dropdown-item v-model="value2" :options="option2" title="全国" @click="city">
            <div class="one">
              <div class="two">
                <ul v-for="(item, ind) in citles" :key="item.id" @click="handleClick(ind)">
                  <li :class="activeIndex === ind ? 'active' : ''">{{ item.province }}</li>
                </ul>
              </div>

              <div class="three">
                <ul v-for="(item, ind) in citles" :key="item.id">
                  <div v-if="ind === activeIndex">
                    <div v-for="(items, ind) in item.cities" :key="ind" @click="handleClicks(ind)">
                      <li :class="activeIndexss === ind ? 'activess' : ''">{{ items }}</li>
                    </div>
                  </div>
                </ul>
              </div>
            </div>
          </van-dropdown-item>

          <van-dropdown-item v-model="value3" :options="option3" title="筛选">
            <li v-for="item in list" :key="item.id" style="line-height: 120px">{{ item.name }}</li>
          </van-dropdown-item>

          <van-dropdown-item v-model="value4" :options="option4" title="蔷薇">
            <div class="main">

              <div class="left">
                <ul class="leftData">
                  <li v-for="(item, index) in addressList" :key="index" @click="handleClick(item, index)"
                    style="padding-left: 5px" :class="index == active ? 'bg' : ''">
                    {{ item.province }}
                  </li>
                </ul>
              </div>

              <div class="right">
                <ul class="leftData">
                  <li v-for="(item, index) in citylist" :key="index" @click="headerCity(item, index)"
                    :class="index == cactive ? 'cbg' : ''">
                    {{ item }}
                  </li>
                </ul>
              </div>

            </div>
          </van-dropdown-item>


        </van-dropdown-menu>
      </div>
    </header>



    <!-- 上拉加载 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <main>

        <div class="centers" v-for="item in data" :key="item.id" style="background-color: #fff">
          <div class="lefts">
            <li>
              <img :src="item.avatar" alt="" v-lazy="item.avatar"
                style="width: 1.5625rem; height: 1.5625rem; border-radius: 1.5625rem" />
            </li>
          </div>

          <div class="rights">
            <li>
              <b><span style="font-size: 0.4375rem">{{ item.name }}</span></b>&nbsp;&nbsp;{{ item.position
              }}&nbsp;&nbsp;<button style="color: #fff; background-color: #01b488; border: none; width: 90px">
                三甲
              </button>
            </li>
            <li>{{ item.address }}&nbsp;&nbsp;{{ item.class }}</li>
            <li>
              <button style="color: #3e83ff; background-color: #f0f5fd; border: none">
                图文咨询
              </button>
            </li>
            <li>擅长:{{ item.brief }}</li>
            <li class="cardIIts">
              <p>
                <span style="font-size: 0.375rem">好评率<span style="color: orange; font-weight: bold">100%</span></span>
              </p>
              <b>|</b>
              <p>
                <span style="font-size: 0.375rem">锦旗<span style="color: orange; font-weight: bold">{{ item.person
                    }}</span></span>
              </p>
              <b>|</b>
              <p>
                <span style="font-size: 0.375rem">浏览人次<span style="color: orange; font-weight: bold">{{
                  item.browse
                    }}</span></span>
              </p>
            </li>

            <li class="cradBot">
              <p>
                ￥<span style="color: red; font-size: 0.375rem">{{ item.praise }}</span>起<span></span>
              </p>
              <button style="" class="btn" @click="qbz(item.id)">问医生</button>
            </li>
          </div>
        </div>
      </main>
    </van-list>

  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import axios from '@/utils/index.ts'
import { onMounted, ref } from 'vue'

const addressList = ref<any[]>([])
const citylist = ref<any[]>([])
const getAddressList = async () => {
  await axios.get('/api/city').then((res) => {
    console.log(res.data.data)
    addressList.value = res.data.data
  })
}
onMounted(() => {
  getAddressList()
})


const post = ref()
const data = ref([])
const searchValue = ref('')
const citles = ref<any>([])
const activeIndex = ref(0)
const activeIndexss = ref(0)

const pageCode = ref(1)
const pageSize = ref(5)

const handleClick = (index: number) => {
  activeIndex.value = index
  console.log(activeIndex.value)
  getList()
}

const handleClicks = (ind: number) => {
  activeIndexss.value = ind
}

// 详情
const qbz = (id: number) => {
  router.push({ path: '/detail', query: { id: id } })
}

// 获取
const getList = async () => {
  console.log(searchValue.value)
  await axios.get('/api/doctorList', {
    params: {
      searchValue: searchValue.value, pageCode: pageCode.value
      , pageSize: pageSize.value
    }
  }).then((res) => {
    console.log(res.data.data)
    data.value = res.data.data
  })
}
getList()


const city = async () => {
  await axios.get('/api/city').then((res) => {
    console.log(res)
    citles.value = res.data.data
  })
}
city()

// 点击左侧返回
const onClickLeft = () => history.back()

// 模拟的数据列表
const items = ref([
  { id: 1, name: '妇产科' },
  { id: 2, name: '儿科' },
  { id: 3, name: '皮肤科' },
  { id: 4, name: '消化内科' },
  { id: 5, name: '呼吸内科' },
  { id: 6, name: '耳鼻喉科' },
  { id: 7, name: '中医科' },
  { id: 8, name: '肿瘤科' },
])

// 搜索
const searchQuery = ref('')
const list = ref([])
const search = () => {
  list.value = items.value.filter((item) => item.name.includes(searchQuery.value))
}
search()

// 上啦加载
const loading = ref(false);
const finished = ref(false);

const onLoad = async () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // 每当上拉加载时，将页面加1
  pageCode.value = pageCode.value + 1;
  setTimeout(async () => {
    let res = await axios.get('/api/doctorList', {
      params: {
        searchValue: searchValue.value, pageCode: pageCode.value
        , pageSize: pageSize.value
      }
    })
    let newData = res.data.data
    data.value = [...data.value, ...newData]
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (data.value.length >= 26) {
      finished.value = true;
    }
  }, 1000);
};

</script>

<style scoped lang="css">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    height: 9rem;
    /* background-color: pink; */
    flex-direction: column;

    .kind {
      h3 {
        padding: 10px 10px;
      }

      ul {
        li {
          float: left;
          width: 20%;
          margin: 0.1563rem;
          margin-left: 0.3125rem;
          text-align: center;
          height: 1rem;
          background-color: #f0f5fd;
          border-radius: 1.5625rem;
          color: #3e83ff;
          line-height: 1rem;
          margin-top: 0.5rem;
          font-size: 26px;
        }
      }
    }

    .one {
      display: flex;

      .two {
        width: 25%;
        overflow-y: auto;
        height: 15.625rem;
        line-height: 1.5625rem;
        background-color: #f5f5f5;
        text-align: center;

        li {
          &.active {
            color: red;
          }
        }
      }

      .three {
        flex: 1;
        overflow-y: auto;

        height: 15.625rem;

        li {
          height: 100px;
          line-height: 100px;
          font-size: 10px;
          text-align: center;
        }
      }
    }

    .active {
      color: red;
    }

    .activess {
      color: red;
    }

    .center {
      display: flex;

      .left {
        width: 25%;
        overflow-y: auto;
        height: 15.625rem;
        line-height: 1.5625rem;
        background-color: green;
      }

      .right {
        flex: 1;
        overflow-y: auto;
        height: 31.25rem;

        li {
          line-height: 1.5625rem;
        }
      }
    }
  }

  main {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /* background-color: #ccc; */

    .centers {
      width: 95%;
      background-color: #fff;
      display: flex;
      margin: 0 auto;

      .lefts {
        padding: 0.1563rem;
        width: 20%;
        /* background-color: green; */
      }

      .rights {
        flex: 1;

        /* background-color: red; */
        li {
          margin: 0.2813rem;
          font-size: 0.3125rem;
        }

        .price {
          display: flex;
          justify-content: space-between;
        }

        .btn {
          background: #1e69f6;
          border: 0;
          color: #fff;
          border-radius: 6px;
          padding: 6px 15px;
        }

        .cradBot {
          display: flex;
          justify-content: space-between;
        }

        .cardIIts {
          display: flex;
          align-items: center;

          b {
            font-weight: normal;
            margin: 0 16px;
            color: #999;
          }
        }
      }
    }
  }

  .main {
    flex: 1;
    display: flex;
    overflow: hidden;

    .left {
      flex: 1;

      li {
        height: 100px;
        line-height: 100px;

        font-size: 25px;
      }

      overflow: auto;
      background: #f6f6f6;
    }

    .right {
      flex: 2;

      li {
        height: 100px;
        line-height: 100px;
        margin-left: 20px;
        font-size: 25px;
      }

      overflow: auto;
      background: #ffffff;
    }
  }
}
</style>
